<template>
  <div id="login">
    <div class="login-con">
      <div class="login-con-left"></div>
      <div class="login-con-right">
        <div class="login-con-right-all">
          <div style="text-align: center;font-size: 22px;font-style: italic">登录</div>
          <el-form ref="formRef" :model="loginform" :rules="rules">
            <el-form-item prop="username">
              <el-input prefix-icon="avatar" v-model="loginform.username" placeholder="请输入用户名"
                        required></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input prefix-icon="lock" v-model="loginform.password" placeholder="请输入密码" required
                        show-password></el-input>
            </el-form-item>
            <el-form-item>
              <div style="display: flex;justify-content: space-between">
                <el-input prefix-icon="el-icon-key" v-model="loginform.validCode" style="width: 50%;"
                          placeholder="请输入验证码" @keyup.enter.native="login"></el-input>
                <ValidCode @input="createValidCode"/>
              </div>
            </el-form-item>
<!--            <el-form-item style="padding-left: 80px" prop="resource">-->
<!--              <el-radio-group v-model="loginform.resource" >-->
<!--                <el-radio label="用户"></el-radio>-->
<!--                <el-radio label="管理"></el-radio>-->
<!--              </el-radio-group>-->
<!--            </el-form-item>-->
            <div style="display: flex;justify-content: space-around">
              <el-button type="primary" @click="login">登录</el-button>
              <el-button @click="$router.replace('/')">取消</el-button>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../utils/request";
import ValidCode from "../components/ValidCode";
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
import router from "@/router";

export default {
  name: 'Login',

  components: {
    ValidCode
  },

  data() {
    return {
      loginform: {
        resource: '用户'
      },
      rules: {
        username: [
          {
            required: true,
            message: '请输入用户名！',
            trigger: 'blur',
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码！',
            trigger: 'blur',
          }
        ],
        resource: [
          {
            required: true,
            message: 'Please input Activity resource',
            trigger: 'blur',
          }
        ]
      },
      validCode: ''
    }
  },

  methods: {
    router,
    ...mapMutations("user",["SET_TOKEN","SET_CURRENTUSER","SET_CURRENTUSERID"]),
    ...mapGetters("user",["GET_TOKEN","GET_CURRENTUSER","GET_CURRENTUSERID"]),
    ...mapActions("user",["Login"]),
    createValidCode(data) {
      this.validCode = data
    },
    login() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          if (!this.loginform.validCode) {
            this.$message.error("请填写验证码")
            return
          }
          if (this.loginform.validCode.toLowerCase() !== this.validCode.toLowerCase()) {
            this.$message.error("验证码错误")
            return
          }
          request.post("/login", this.loginform).then(res => {
            if (res.code == 0) {
              this.Login(res)
              // console.log(this.GET_CURRENTUSER())
              this.$router.push("/admin");
              // if(this.loginform.resource === '管理'){
              //     this.$router.push("/admin")
              //   }
              //
              // if(this.loginform.resource ==='用户'){
              //   this.$router.push("/")
              // }
            }

          })
        }
      })

    }
  }
}

</script>

<style lang="less" scoped>
#login {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #409eff;
  opacity: 0.95;
}

.login-con {
  width: 55%;
  height: 75%;
  margin: 70px auto;
  border-radius: 20px;
  opacity: 0.85;
  transform: translateZ(10px);
}

.login-con-left {
  float: left;
  width: 45%;
  height: 100%;
  border-radius: 20px 0 0 20px;
  background: url('../assets/login-con-left.png') no-repeat;
  background-size: 100% 100%;
}

.login-con-right {
  float: left;
  width: 55%;
  height: 100%;
  background-color: white;
  border-radius: 0 20px 20px 0;
}

.login-con-right-all {
  width: 80%;
  height: 70%;
  margin: 150px auto 0;
}

#login  .el-input {
  margin: 10px 0;
  color: black;
}
#login :deep(.el-input__inner) {
  height: 4.5vh;
  font-size: 18px;
}
#login :deep(.el-button) {
  transform:scale(1.3);
}

</style>
